import React, { useState } from "react";
import { View, Image, Text, Button } from "@tarojs/components";
import Taro from "@tarojs/taro";
import imgs from "./imgs/_img";
import { AtTabs, AtTabsPane } from "taro-ui";

import styles from "./index.module.scss";
import MiniHeader from "@/components/UI/MiniHeader";
import { LeidaChart } from "./components/chart";
import Title from "@/components/UI/Title";
import cn from "@/utils/classnames";

export default function() {
  let [title, setTitle] = useState("测评报告");
  let [curTab, setCurTab] = useState(0);
  const tabList = [
    {
      title: "实际性",
      content:
        "情绪稳定、有耐心、坦诚直率，不喜多言，宁愿付诸行动。对机械、工具等可操作的事物感兴趣。喜欢在注重实际、需要动手操作的环境中从事明确、固定的工作。倾向于依照既定的规则，一步一步地制造完成有实际用途的物品。生活上以实用为重，关注眼前的事物而非对未来的想象，比较喜欢独自做事。喜欢从事机械、电子、土木等相关工作。",
    },
    { title: "研究性", content: "fsfsef" },
    { title: "艺术性" },
    { title: "社会性" },
    { title: "企业性" },
  ];
  return (
    <View className={styles.page}>
      <MiniHeader title={title} transparent={false} hideHome></MiniHeader>
      <View className={styles.pageContent}>
        <View className={styles.header}>
          <Image src={imgs.cepingbaogao_2x}></Image>
          梁朝伟的兴趣倾向测评报告
        </View>
        <View className={styles.chartWrap}>
          <Text className={styles.chartText}>
            整体来看，你的兴趣爱好属于AS型，即你的首要兴趣类 型为艺术性，同时兼具社会倾向。
          </Text>
          {/* <LeidaChart></LeidaChart> */}
        </View>
        <View className={styles.interest}>
          <View className={styles.interestHeader}>
            <Text>兴趣类型分析</Text>
          </View>
          <View className={styles.interestBody}>
            <Title>兴趣分析</Title>
            <View className={styles.interestBodyContent}>
              你是一个善解人意、慷慨助人、仁慈善良的人。你愿意付出时间和精力去解决别人之间的冲突，喜欢结交新朋友，也喜欢通过引导、启发等方式帮助他们获得成长。生活中，你充满爱心，待人和善，容易相处，这也使得周围人非常乐意和你谈心、交朋友。你做事有责任感，乐于与他人合作。你比较喜欢通过小组讨论或分工的形式掌握知识，提高学习效率。
            </View>
            <Title>兴趣分析</Title>
            <View className={styles.interestBodyContent}>
              你是一个善解人意、慷慨助人、仁慈善良的人。你愿意付出时间和精力去解决别人之间的冲突，喜欢结交新朋友，也喜欢通过引导、启发等方式帮助他们获得成长。生活中，你充满爱心，待人和善，容易相处，这也使得周围人非常乐意和你谈心、交朋友。你做事有责任感，乐于与他人合作。你比较喜欢通过小组讨论或分工的形式掌握知识，提高学习效率。
            </View>
            <Title>兴趣分析</Title>
            <View className={styles.interestBodyContent}>
              你是一个善解人意、慷慨助人、仁慈善良的人。你愿意付出时间和精力去解决别人之间的冲突，喜欢结交新朋友，也喜欢通过引导、启发等方式帮助他们获得成长。生活中，你充满爱心，待人和善，容易相处，这也使得周围人非常乐意和你谈心、交朋友。你做事有责任感，乐于与他人合作。你比较喜欢通过小组讨论或分工的形式掌握知识，提高学习效率。
            </View>
          </View>
        </View>
        <AtTabs
          scroll={tabList.length > 5}
          className={styles.atTab}
          current={curTab}
          tabList={tabList}
          onClick={setCurTab}
        >
          {tabList.map((item, index) => {
            return (
              <AtTabsPane className={styles.atBodyText} current={curTab} index={index}>
                <View>{item.content}</View>
              </AtTabsPane>
            );
          })}
        </AtTabs>
        <View className={styles.interest}>
          <View className={styles.interestHeader}>
            <Text>专业适配等级</Text>
          </View>
          <View className={styles.interestBody}>
            <View className={styles.interestBodyContent}>
              适配值越大，表示与你的兴趣适配度越符合 。
              兴趣适配仅考虑兴趣因素，未考虑性别、科类/选考、成绩、能力等其他因素。
            </View>
            <View className={styles.table}>
              <View className={cn(styles.tableLine, styles.tableLineHeader)}>
                <View className={styles.tableCell}>排名</View>
                <View className={styles.tableCell}>专业名称</View>
                <View className={styles.tableCell}>专业类</View>
                <View className={styles.tableCell}>兴趣适配度</View>
              </View>
              <View className={cn(styles.tableLine)}>
                <View className={styles.tableCell}>1</View>
                <View className={styles.tableCell}>专业名称</View>
                <View className={styles.tableCell}>专业类</View>
                <View className={styles.tableCell}>兴趣适配度</View>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}
